<template>
  <!-- 创建否定商品投放 -->
  <div class="choose-product-w">
    <div class="head">否定商品投放</div>
    <div class="choose-product-con flex">
      <div class="choose-list">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" title="排除品牌">
            <a-textarea :disabled="isDisabled" v-model="brandVal" placeholder="输入品牌，一行一个" allow-clear style="height: 240px" />
            <div class="flex-c-sb">
              <p>不得包含特殊字符，如@、#、*、$、/等</p>
              <a-button size="mini" type="primary" @click="addVal(brandVal, 'negativeBrands')" v-if="!isDisabled">添加</a-button>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" title="排除ASIN">
            <a-textarea :disabled="isDisabled" v-model="asinVal" placeholder="输入ASIN，一行一个" allow-clear style="height: 240px" />
            <div class="flex-c-sb">
              <p>不得包含特殊字符，如@、#、*、$、/等</p>
              <a-button size="mini" type="primary" @click="addVal(asinVal, 'negativeAsins')" v-if="!isDisabled">添加</a-button>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div class="checked-list">
        <div class="flex-c-sb" style="margin-bottom: 10px">
          <p>已否定{{ editSpCampaignInfo.negativeAsins.length + editSpCampaignInfo.negativeBrands.length }}个商品</p>
          <p class="highlight cursor" type="text" @click="deleteAll()" style="font-size: 12px" v-if="!isDisabled">全部删除</p>
        </div>
        <a-scrollbar style="height: 250px; overflow: auto">
          <ul>
            <li class="product-item flex-c-sb" v-for="(val, i) in editSpCampaignInfo.negativeBrands" :key="i">
              <p>
                <span>品牌：</span>
                <span class="highlight">{{ val }}</span>
              </p>
              <icon-close-circle class="cursor" style="font-size: 16px" @click="deleteProduct(i, 'negativeBrands')" />
            </li>
            <li class="product-item flex-c-sb" v-for="(val, i) in editSpCampaignInfo.negativeAsins" :key="i">
              <p>
                <span>ASIN：</span>
                <span class="highlight">{{ val }}</span>
              </p>
              <icon-close-circle class="cursor" style="font-size: 16px" @click="deleteProduct(i, 'negativeAsins')" v-if="!isDisabled" />
            </li>
          </ul>
        </a-scrollbar>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { DraftFinishStep } from '../../types'
  const props = defineProps({
    darftInfo: {
      type: Object,
      default: () => {},
    },
  })
  onMounted(() => {
    // 有草稿箱
    if (props.darftInfo?.draftId) {
      editSpCampaignInfo.value.negativeAsins = props.darftInfo?.negativeAsins || []
      editSpCampaignInfo.value.negativeBrands = props.darftInfo?.negativeBrands || []
    }
  })
  const editSpCampaignInfo = ref<any>({
    negativeAsins: [],
    negativeBrands: [],
  })
  // 根据当前流程节点判断是否可编辑
  let isDisabled = computed(() => {
    let handlerFlow = props.darftInfo?.handlerFlow || 'INIT'
    let level = DraftFinishStep[handlerFlow]
    return Number(level) > 7 ? true : false
  })
  const brandVal = ref()
  const asinVal = ref()

  // 输入关键词添加
  async function addVal(values: any, key: string) {
    if (!values) {
      Message.error('请输入')
      return
    }
    const reg = new RegExp('[~!@#$^&*=《》?！@#￥&*{}【】‘；：。，、？]')
    if (reg.test(values)) {
      Message.error('不得包含特殊字符，如@、#、*、$、/等')
      return
    }
    let list = values.split('\n')
    list = list.filter((el: string) => el?.trim())
    if (!list.length) return
    list.forEach((val: string) => {
      let newVal = val?.trim()
      if (newVal && editSpCampaignInfo.value[key].indexOf(newVal) < 0) {
        editSpCampaignInfo.value[key].push(newVal)
      }
    })
  }
  // 刪除产品
  function deleteProduct(i: number, key: string) {
    editSpCampaignInfo.value[key].splice(i, 1)
  }
  // 刪除全部
  function deleteAll() {
    editSpCampaignInfo.value.negativeAsins = []
    editSpCampaignInfo.value.negativeBrands = []
  }
  // 校验信息
  async function validateData() {
    return true
  }
  // 设置需要创建的数据
  function setCreateData() {
    return {
      negativeAsins: editSpCampaignInfo.value.negativeAsins,
      negativeBrands: editSpCampaignInfo.value.negativeBrands,
    }
  }
  defineExpose({ validateData, setCreateData })
</script>
<style lang="less" scoped>
  .edit-header {
    background-color: var(--color-fill-2) !important;
    border-left: 2px solid rgb(var(--primary-6));
    line-height: 32px;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 20px;
  }
  .choose-product-w {
    border: 1px solid var(--color-border);
    .head {
      padding: 6px 20px;
      border-bottom: 1px solid var(--color-border);
    }
    .choose-list {
      width: 50%;
      border-right: 1px solid var(--color-border);
    }
    :deep(.arco-tabs-pane) {
      padding: 10px 20px;
    }
    .checked-list {
      padding: 10px 20px;
      flex: 1;
    }
    .product-item {
      margin-bottom: 5px;
    }
  }
</style>
